<template>
<view class="sxdiv" :style="'max-height:' + height">
	<view class="ttt">选址招商</view>
	<view class="cell">
		<view class="cell_left">产业领域</view>
		<view class="cell_right" @click="showPop('chain')">{{chain_name||'请选择'}}</view>
	</view>
	<view class="cell">
		<view class="cell_left">产业行业</view>
		<view class="cell_right">
			<picker mode='multiSelector' :value='industry_index' :range='industryAll' range-key="industry_name" @change='changeI' @columnchange='changeLie'>
				{{industry_name||'请选择'}}
			</picker>
		</view>
	</view>
	<view class="cell">
		<view class="cell_left">行政区域</view>
		<view class="cell_right" @click="showPop('city')">{{city_name||'请选择'}}</view>
	</view>
	<view class="cell">
		<view class="cell_left">政策倾向</view>
		<view class="cell_right" @click="showPop('zc')">{{policy_name||'请选择'}}</view>
	</view>
	<view class="cell">
		<view class="cell_left cell_left1">预计投资(万)</view>
		<view class="cell_right cell_right1">
			<input type="text" class="input" placeholder="请输入" v-model="invest_money" />
		</view>
	</view>
	<view class="cell">
		<view class="cell_left">企业名称</view>
		<view class="cell_right cell_right1">
			<input type="text" class="input" placeholder="请输入" v-model="company_name"/>
		</view>
	</view>
	<!-- <view class="cell">
		<view class="cell_left cell_left1">您关注的产品或服务</view>
		<view class="cell_right cell_right1">
			<input type="text" class="input" placeholder="请输入" v-model='products'/>
		</view>
	</view> -->
	
	<button v-if="!mobile" class="btn_pp" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">智能匹配</button>
	<view class="btn_pp" v-else @click="submit()">智能匹配</view>
	
	<multiple-select
		:value="isShow"
		:data="chooseList"
		:default-selected="chooseValue"
		@confirm="changeChoose"
		@cancel='isShow=false'
		:allShow='isAll'
	></multiple-select>
</view>
</template>

<script>
	import { GetUseInfo,GetIndustryInfo,city,policy,getWxappUserPhoneByCode } from '@/utils/api.js'
	import multipleSelect from "@/components/momo-multipleSelect/momo-multipleSelect";
	export default {
		name:"sxDiv",
		data() {
			return {
				height: uni.getStorageSync('windowH') - 180 + "px",
				isShow:false,
				isAll:false,
				
				chooseList:[],
				chooseValue:[],
				type:'chain',
				chainList:uni.getStorageSync('myChain'),
				chain_id:[],
				chain_name:'',
				
				industryAll:[[],[]],
				industryList:[],
				industry_id:[],
				industry_index:[0,0,0],
				industry_name:'',
				
				cityList:[],
				city_id:[],
				city_name:'',
				
				policyList:[],
				policy_id:[],
				policy_name:'',
				
				invest_money:'',
				company_name:'',
				products:'',
				
				mobile:''
				
			};
		},
		components:{
			multipleSelect
		},
		onLoad(){
			GetUseInfo().then(res=>{
				this.mobile = res.data.mobile
			})
			
			this.chainList = this.chainList.map(item=>{item.label=item.chain_name;item.value=item.id;return item})
			
			GetIndustryInfo().then(res=>{
				res.data.unshift({industry_name:'不限',id:'',children:[{industry_name:'不限',id:''}]})
				let arr = res.data.map(item=>{
					let i = {
						id:item.id,
						industry_name:item.industry_name,
						children:item.children
					}
					return item
				})
				this.industryAll[0] = arr
				this.industryAll[1] = arr[0].children
			})
			city({city_id:uni.getStorageSync('myCity').id}).then(res=>{
				this.cityList =  res.data.map(item=>{item.label=item.city_name;item.value=item.id;return item})
			})
			policy.type().then(res=>{
				this.policyList =  res.data.data.map(item=>{item.label=item.type_name;item.value=item.id;return item})
			})
		},
		methods:{
			clearAll(){
				this.chain_id=[]
				this.chain_name=''
				
				this.industry_id=[]
				this.industry_name=''
				
				this.city_id=[]
				this.city_name=''
				
				this.policy_id=[]
				this.policy_name=''
				
				this.invest_money=''
				this.company_name=''
				this.products=''
			},
			changeLie(e){
				console.log(e.detail)
				if(e.detail.column!=0){
					return
				}
				this.industryAll[1] = this.industryAll[0][e.detail.value].children
			},
			changeI(e){
				let industry_name = [],industry_id=[]
				e.detail.value.forEach((item,index)=>{
					industry_name.push(this.industryAll[index][item].industry_name)
					industry_id.push(this.industryAll[index][item].id)
				})
				console.log(industry_id)
				this.industry_name = industry_name.join(',')
				this.industry_id = industry_id
			},
			showPop(type){
				this.type = type
				if(type=='chain'){
					this.isAll = false
					this.chooseList = JSON.parse(JSON.stringify(this.chainList))
					this.chooseValue = JSON.parse(JSON.stringify(this.chain_id))
				}else if(type=='city'){
					this.isAll = false
					this.chooseList = JSON.parse(JSON.stringify(this.cityList))
					this.chooseValue = JSON.parse(JSON.stringify(this.city_id))
				}else if(type=='zc'){
					this.isAll = true
					this.chooseList = JSON.parse(JSON.stringify(this.policyList))
					this.chooseValue = JSON.parse(JSON.stringify(this.policy_id))
				}
				this.isShow=true
			},	
			changeChoose(e){
				this.isShow=false
				if(this.type=='chain'){
					this.chain_id = e.map((el) => el.value)
					this.chain_name = e.map((el) => el.label).join(",");
				}else if(this.type=='city'){
					this.city_id = e.map((el) => el.value)
					this.city_name = e.map((el) => el.label).join(",");
				}else if(this.type=='zc'){
					this.policy_id = e.map((el) => el.value)
					this.policy_name = e.map((el) => el.label).join(",");
				}
			},
			onGetPhoneNumber(e){
				getWxappUserPhoneByCode({code:e.detail.code}).then(res=>{
					this.mobile = res.data.phone_info.phoneNumber
					this.submit()
				})
			},
			submit(){
				let data = {
					chain_id:this.chain_id.join(','),
					industry_id:this.industry_id.join(','),
					city_id:this.city_id.join(','),
					policy_id:this.policy_id.join(','),
					invest_money:this.invest_money,
					company_name:this.company_name,
					products:this.products,
					mobile:this.mobile
				}
				if(!this.chain_id.length&&!this.industry_id.length&&!this.city_id.length&&!this.policy_id.length&&!this.invest_money&&!this.company_name&&!this.products){
					uni.showToast({
						title:'至少选择一项匹配条件',
						icon:'none'
					})
					return
				}
				data.city_id = data.city_id||uni.getStorageSync('myCity').id
				this.$emit('getQuery',data)
			}
		}
	}
</script>

<style scoped lang="scss">
	.btn_pp{
		// bottom: 80px;
		width: calc(100% - 30px);
		margin-left: 15px;
		height: 36px;
		border-radius: 4px;
		line-height: 36px;
		text-align: center;
		background: #29aaff;
		color: #fff;
		font-size: 18px;
		margin-top: 20px;
	}
.ttt{
	height: 32px;
	line-height: 32px;
	font-size: 18px;
	font-weight: 800;
	text-align: center;
	position: sticky;
	top: 0;
	background-color: #fff;
}
.sxdiv{
	width: 100%;
	background-color: #fff;
	// max-height: 500px;
	border-radius: 20px 20px 0 0;
	transition: all 0.5s;
	position: relative;
	padding-bottom: 95px;
	overflow-y: auto;
}
.cell{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #f1f1f1;
	padding: 10px 14px;
	.cell_left{
		width: 70px;
		font-size: 15px;
	}
	.cell_left1{
		width: 140px;
		font-size: 15px;
	}
	.cell_right{
		max-width: calc(100% - 80px);
		display: flex;
		flex-wrap: wrap;
		text-align: right;
		font-size: 12px;
		color: #666;
	}
	.cell_right1{
		width: calc(100% - 150px);
		.input{
			text-align: right;
			width: 100%;
		}
	}
}
</style>